<template>
    <div class="nav-contain">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#2980b9"
                text-color="#fff"
                active-text-color="#9AECDB">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">购物车</el-menu-item>
            <el-menu-item index="3">Pear</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                //当前选中菜单的下标
                activeIndex: '1',
                //配置菜单栏
                menus: {
                    1: '/home',
                    2: '/cart',
                    3: '/pear'
                }
            };
        },
        methods: {
            //当选中菜单栏后跳转相应的路由
            handleSelect(key, keyPath) {
                this.$router.push({path: this.menus[key]});
            }
        }
    }
</script>

<style lang="less">
    .nav-contain {

    }
</style>